<template>
	<view class="pageBox">
		<view class="topBG">
			<image class="img" src="@/static/home/homeTop.png"></image>
		</view>
		<view class="myBox-topBox">
			<uni-nav-bar height="88rpx" fixed title="个人中心" color="#fff" :border="false" statusBar
				:backgroundColor="navBG">
			</uni-nav-bar>
			<view class="contentBox">
				<view class="userRow">
					<view class="userRow-left">
						<view class="userImg">
							<image :src="setImg(userInfo.avatar)" v-if="userInfo.avatar" class="imgSize"
								mode="scaleToFill">
							</image>
							<image src="@/static/home/useImg.png" v-else class="imgSize" mode="scaleToFill"></image>
						</view>
						<view class="left-right">
							<view class="userNameBox">
								<view class="userName">{{userInfo.nickName}}</view>
								<!-- <view class="userInfoStatus" @click="goto('my/myInfo/myInfo')">个人信息</view> -->
							</view>
							<!-- <view class="userType" v-if="eliteInfo">
								<text v-if="dicts.elite_type[eliteInfo.eliteType]"
									style="margin-right: 10rpx;">{{dicts.elite_type[eliteInfo.eliteType]}}人才</text>
								{{sexs[userInfo.sex]||userInfo.sex}}
							</view> -->
						</view>
					</view>
				</view>
				<template>
					<view class="topMatterBox">
						<view class="topMatter">
							<view class="topMatter-item" @click="goto('my/activity/activityList/activityList')">
								<view class="top">{{myActivitys.total||0}}</view>
								<view class="bottom">我的活动</view>
							</view>
							<view class="topMatter-item" @click="goto('common/integral/integralRecord/integralRecord')">
								<view class="top">{{userInfo.integral||0}}</view>
								<view class="bottom">积分</view>
							</view>
						</view>
					</view>
					<!-- <view class="myActivitiesBox">
						<view class="title">我的活动</view>
						<view class="myActivitiesRow">
							<view class="item" v-for="(item,index) in myActivities" :key="index"
								@click="goto('my/activity/activityList/activityList',{activityState:item.data},'activityList')">
								<view class="num" v-if="eliteInfo.activityCount">
									{{eliteInfo.activityCount[item.text]||0}}
								</view>
								<view class="num" v-else>0</view>
								<view class="text">{{item.text}}</view>
							</view>
						</view>
					</view> -->
				</template>
				<!-- <view class="myActivitiesBox" v-if="userInfo.userType=='yk'">
					<view class="title">我的活动</view>
					<view class="myActivitiesRow">
						<view class="item" v-for="(item,index) in myActivities" :key="index"
							@click="goto('my/activity/activityList/activityList',{activityState:item.data},'activityList')">
							<view class="num" v-if="ykInfo.activityCount">{{ykInfo.activityCount[item.text]||0}}
							</view>
							<view class="num" v-else>0</view>
							<view class="text">{{item.text}}</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="welfaresBox">
					<image class="welfareImg" src="@/static/my/welfareImg.png" @click="goto('activity/activity')">
					</image>
				</view> -->
				<!-- <view class="myOrderBox">
					<view class="title">操作</view>
					<view class="myOrderRow">
						<view class="item" @click="outLoginShow=true">
							<image class="img" src="@/static/my/WaitingForShipment.png"></image>
							<view class="text">退出登录</view>
						</view>
					</view>
				</view> -->
				<view class="myActionBox">
					<view class="title">我的操作</view>
					<view class="myActionRow" @click="goto('my/myInfo/myInfo')">
						<view class="left">
							<image class="iconImg" src="@/static/my/myAction1.png"></image>
							<view class="text">我的信息</view>
						</view>
						<uni-icons type="right" size="24rpx"></uni-icons>
					</view>
					<!-- 	<view class="myActionRow" @click="goto('my/enrollList/enrollList')"
						v-if="getAudit(roles,['audit'])">
						<view class="left">
							<image class="iconImg" src="@/static/my/myAction1.png"></image>
							<view class="text">我的审核</view>
						</view>
						<uni-icons type="right" class="rightIcon" size="24rpx"></uni-icons>
					</view> -->
					<view class="myActionRow" @click="goto('my/allActivity/allActivity')"
						v-if="getAudit(roles,['audit'])">
						<view class="left">
							<image class="iconImg" src="@/static/my/myAction4.png"></image>
							<view class="text">活动列表</view>
						</view>
						<uni-icons type="right" class="rightIcon" size="24rpx"></uni-icons>
					</view>
					<view class="myActionRow" @click="goto('common/integral/integralRecord/integralRecord')">
						<view class="left">
							<image class="iconImg" src="@/static/my/myAction2.png"></image>
							<view class="text">我的积分</view>
						</view>
						<uni-icons type="right" size="24rpx"></uni-icons>
					</view>
					<view class="myActionRow" @click="goto('common/integral/exchangeRecord/exchangeRecord')">
						<view class="left">
							<image class="iconImg" src="@/static/my/myAction3.png"></image>
							<view class="text">我的兑换</view>
						</view>
						<uni-icons type="right" class="rightIcon" size="24rpx"></uni-icons>
					</view>
					<view class="myActionRow" @click="outLoginShow=true">
						<view class="left">
							<image class="iconImg" src="@/static/my/myAction3.png"></image>
							<view class="text">退出登录</view>
						</view>
						<uni-icons type="right" class="rightIcon" size="24rpx"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<tabBar selectedIndex="2"></tabBar>
		<!-- <myTabBar nowIndex="my/my"></myTabBar> -->
		<u-modal :show="rzShow" title="提示" content="请先提交认证申请成为人才!" confirmText="去提交" showCancelButton cancelText="取消"
			@confirm="toRZ" @close="RZX" @cancel="RZX"></u-modal>
		<u-modal :show="outLoginShow" title="提示" content="确认退出登录吗？" confirmText="确认" showCancelButton cancelText="取消"
			@confirm="outLogin" @close="outLoginShow=false" @cancel="outLoginShow=false"></u-modal>
	</view>
</template>

<script>
	import {
		getInfo
	} from "@/api/user.js"
	import * as systemApi from "@/api/system.js"
	import {
		isExternal
	} from "@/utils/verify.js"
	import * as activityApi from "@/api/activity.js"
	import config from "@/core/config.js"

	export default {
		data() {
			return {
				rzShow: false,
				outLoginShow: false,
				sexs: ['男', '女', '未知'],
				ykInfo: {
					activityCount: {
						"全部": 1,
						"已报名": 1,
						"已结束": 0
					}
				},
				roles: [],
				eliteInfo: {
					count: {},
					activityCount: {}
				},
				userInfo: {
					userName: '',
					roles: [{
						roleName: '',
						roleId: '',
						roleKey: ''
					}],
					avatar: '',
					nickName: '',
					sex: 2
				},
				orders: [{
					text: '待发货',
					url: 'my/couponPage/couponPage',
					num: '5'
				}, {
					text: '待确认',
					url: 'my/couponPage/couponPage',
					num: '5'
				}, {
					text: '已完成',
					url: 'my/couponPage/couponPage',
					num: '5'
				}, {
					text: '全部订单',
					url: 'my/couponPage/couponPage',
					num: '5'
				}],
				navBG: 'transparent',
				topMatters: [{
					text: '优惠卷',
					keyName: '优惠卷',
					url: 'my/couponPage/couponPage',
					num: '5'
				}, {
					text: '约车',
					url: 'my/serve/rideHailing/rideHailingList/rideHailingList',
					num: '2'
				}, {
					text: '代办',
					url: 'my/serve/agent/agentList/agentList',
					num: '0'
				}, {
					text: '报修',
					url: 'my/serve/repair/repairList/repairList',
					num: '0'
				}, {
					text: '家政',
					url: 'my/serve/Housekeeping/HousekeepingList/HousekeepingList',
					num: '1'
				}],
				myActivities: [{
					text: '全部',
					num: '5',
					data: ''
				}, {
					text: '已报名',
					num: '2',
					data: '0'
				}, {
					text: '已结束',
					num: '3',
					data: '2'
				}],
				dicts: {
					indent_status: {},
					elite_type: {},
				},
				dictList: {
					elite_type: [],
					indent_status: []
				},
				myActivitys: {
					total: 0,
					rows: []
				}
			};
		},
		onLoad() {
			this.getDictDataList('indent_status')
			this.getDictDataList('elite_type')
		},
		onShow() {
			this.getUserInfo()
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			uni.hideTabBar({
				animation: false
			})

		},
		methods: {
			getAudit(arr, values) {
				let flag = false
				values.forEach(value => {
					flag = arr.includes(value)
				})
				if (arr.includes('admin')) {
					flag = true
				}
				return flag
			},
			getMyActivity() {
				activityApi.enrollListOfUser().then(res => {
					this.myActivitys.rows = res.rows
					this.myActivitys.total = res.total
					console.log(res);
				})
			},
			setImg(url) {
				if (isExternal(url)) {
					return url
				} else {
					return config.baseUrl + '/dev-api' + url
				}
			},
			outLogin() {
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			toRZ() {
				uni.$u.debounce(() => {
					this.$navTo(`pages/common/authentication/authentication`)
					this.rzShow = false
				}, 500)

			},
			RZX() {
				this.rzShow = false
			},
			// indent_status
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			getUserInfo() {
				const that = this
				this.$store.dispatch('userBaseInfo').then(res => {
					this.userInfo = res.user
					this.eliteInfo = res.eliteInfo
					this.roles = res.roles
					this.getMyActivity()
				})
			},
			goto(url, data, storage = '') {
				if (storage) {
					uni.setStorageSync(`${storage}_Search`, JSON.stringify(data))
				}
				this.$navTo(`pages/${url}`, data)
			}
		},
		// onPageScroll({
		// 	scrollTop
		// }) {
		// 	if (scrollTop > 10) {
		// 		this.navBG = "#1F4FD7"
		// 	} else {
		// 		this.navBG = "transparent"
		// 	}
		// 	console.log(e);
		// }
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		position: relative;
		min-height: 100vh;
		background-color: #F4F7FF;

		.topBG {
			flex-shrink: 0;
			top: 0;
			left: 0;
			position: absolute;
			width: 100%;
			height: 480rpx;

			// background: linear-gradient(to right, #6FA9FF, #6FA9FF);
			// object-fit: cover;
			.img {
				width: 100%;
				height: 100%;
			}
		}

		.myBox-topBox {
			width: 100%;
			position: relative;
			z-index: 1;

			.contentBox {
				padding: 0 30rpx;
				padding-top: 20rpx;
			}
		}

		.userRow {
			position: relative;
			z-index: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.userRow-left {
				display: flex;
				align-items: center;
				width: 100%;

				.userImg {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.left-right {
					width: 100%;

					.userNameBox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.userName {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
						}

						.userInfoStatus {
							padding: 12rpx 16rpx;
							background: rgba(255, 255, 255, 0.3);
							border-radius: 16rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-left: 20rpx;
						}
					}

					.userType {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 10rpx;
					}
				}
			}

			.userRow-right {
				display: flex;
				align-items: center;
				flex-shrink: 0;

				.img {
					width: 44rpx;
					height: 44rpx;
					object-fit: cover;
				}
			}
		}

		.topMatterBox {
			position: relative;
			margin-top: 40rpx;
			margin-bottom: 30rpx;

			.topMatter {
				width: 100%;
				height: 196rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.topMatter-item {
					width: 50%;
					box-sizing: border-box;
					text-align: center;
					padding: 0 5rpx;

					.top {
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #000000;
						margin-bottom: 20rpx;
					}

					.bottom {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #7B7B7B;
					}
				}
			}
		}

		.welfaresBox {
			width: 100%;
			margin-bottom: 30rpx;

			.welfareImg {
				width: 100%;
				height: 252rpx;
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.myActionBox {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				margin-bottom: 40rpx;
			}

			.myActionRow {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 46rpx;
				margin-bottom: 34rpx;

				&:last-of-type {
					margin-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;

					.iconImg {
						width: 46rpx;
						height: 46rpx;
						flex-shrink: 0;
						margin-right: 10rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
				}

				.rightIcon {
					flex-shrink: 0;
				}
			}
		}




		.myOrderBox {
			height: 252rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;

			.title {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
			}

			.myOrderRow {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.item {
					width: 25%;
					box-sizing: border-box;
					text-align: center;

					.img {
						width: 64rpx;
						height: 64rpx;
						object-fit: cover;
					}

					.text {
						margin-top: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}

		.myActivitiesBox {
			height: 258rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 30rpx;

			.title {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
			}

			.myActivitiesRow {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.item {
					width: 33.3333%;
					box-sizing: border-box;
					text-align: center;

					.num {
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #000000;
					}

					.text {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #7B7B7B;
					}
				}
			}
		}

	}
</style>